<template>
  <div class="table-number">
    <!-- 头部 -->
    <div class="filter">
      <el-form ref="form" :model="form" label-width="90px" label-position="left" size="small">
        <div class="flexRBC">
          <el-form-item label="桌号名称：" prop="tableNo" size="small" style="marginBottom:0">
            <el-input v-model="form.tableNo" placeholder="请输入桌台名称" />
            <el-button
              v-if="!filterCollapseActive"
              type="primary"
              round
              @keyup.enter.native="searchByKeyword"
              @click="searchByKeyword"
            >查 询</el-button>
          </el-form-item>
          <!-- <el-button type="primary" size="small" round @click="edit('add')">新增桌台</el-button> -->
          <!-- <el-button type="primary" size="small" round @click="edit('add')">新增桌台</el-button> -->
          <el-dropdown split-button type="primary" size="small" @click="addTable('single')">
            新增桌台
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div @click="addTable('batch')">批量新增桌台</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <!-- 筛选 -->
        <div class="app-main-filter-collapse-box">
          <el-collapse @change="filterCollapseChange">
            <el-collapse-item ref="filterCollapse" title="按条件筛选" name="1">
              <el-form-item label="所属区域：" prop="areaId">
                <el-select v-model="form.areaId" filterable placeholder="请选择">
                  <el-option label="全部区域" value="all" />
                  <el-option
                    v-for="item in areaIdOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item class="filter-btn">
                <el-button type="primary" round @click="search('form')">查 询</el-button>
                <el-button round @click="resetFilter('form')">重 置</el-button>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-form>
    </div>
    <div class="content">
      <!-- 表格内容 -->
      <div class="list-table">
        <el-table
          v-loading="tableLoading"
          :data="list"
          border
          stripe
          style="width: 100%"
          empty-text="暂未设置桌台"
        >
          <el-table-column prop="tableNo" label="桌台名称" />
          <el-table-column prop="areaName" label="所属区域" />
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="editTable(scope.row)">修改</el-button>
              <el-button type="text" size="mini" @click="delTable(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination-direction
          v-if="paginationConfig.total!==0"
          :config="paginationConfig"
          @sizeschange="sizesChange"
          @pagechange="pageChange"
        />
      </div>
    </div>
    <!-- 桌台编辑 -->
    <dialog-edit-table
      ref="editTable"
      :area-id-options="areaIdOptions"
      :shop-id="shopId"
      @getTableAreasOptions="getTableAreasOptions"
    />
  </div>
</template>

<script>
import {
  getTableAreasList,
  getTableNumberList,
  delTableNumber
} from '../../../api/table'
import DialogEditTable from './DialogEditTable'
export default {
  components: {
    DialogEditTable
  },
  props: {
    shopId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      // 配置
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      areaIdOptions: [],
      // 状态
      tableLoading: false, // 表格loading
      searchLoading: false, // 表格loading
      filterCollapseActive: false, // 筛选是否打开
      // 数据
      list: [], // 表格数据
      // 筛选数据
      form: {
        tableNo: '',
        areaId: 'all'
      }
    }
  },
  watch: {
    shopId(val) {
      this.initData()
      this.getTableAreasOptions()
    }
  },
  mounted() {
    this.initData()
    this.getTableAreasOptions()
  },
  methods: {
    /**
       * 获取数据
       */
    // 获取门店数据
    initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      // 加入page
      this.form.pageNum = page
      this.form.pageSize = pageSize
      this.form.shopId = this.shopId
      const params = Object.assign({}, this.form)
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      // 判断筛选是否展开
      if (!this.filterCollapseActive) {
        delete params['areaId']
      }
      this.tableLoading = true
      getTableNumberList(params)
        .then(res => {
          this.list = res.data.list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .finally(() => {
          this.tableLoading = false
          this.searchLoading = false
        })
    },

    // 获取区域选项
    getTableAreasOptions() {
      getTableAreasList({ shopId: this.shopId })
        .then(res => {
          this.areaIdOptions = res.data
        })
        .catch(err => {})
        .finally(() => {})
    },

    // 分页sizes改变
    sizesChange() {
      this.initData()
    },

    // 分页page改变
    pageChange() {
      this.initData()
    },

    /**
       * 按钮组
       */
    // 点击搜索
    searchByKeyword() {
      this.searchLoading = true
      this.initData(1)
    },

    // 新增桌台
    addTable(type) {
      this.$refs.editTable.open({ type: type, mode: 'add' }).then(res => {
        this.initData()
      })
    },

    // 点击新增
    editTable(row) {
      this.$refs.editTable
        .open({
          mode: 'edit',
          row
        })
        .then(res => {
          this.initData()
        })
    },

    // 删除
    delTable(row) {
      this.$confirm(`你确认要删除桌台：${row.tableNo}, 是否继续?`, '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        roundButton: true
      })
        .then(() => {
          this.tableLoading = true
          delTableNumber(row)
            .then(res => {
              this.$notify({
                title: '成功',
                message: '删除桌台成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
              this.initData()
            })
            .catch(err => {})
            .finally(() => {
              this.tableLoading = false
            })
        })
        .catch(() => {})
    },

    // 筛选
    search(formName) {
      this.initData(1)
    },

    // 重置
    resetFilter(formName) {
      this.$refs[formName].resetFields()
    },

    /**
       * 状态组
       */
    // 筛选
    filterCollapseChange(val) {
      if (val.length === 0) {
        this.filterCollapseActive = false
      } else {
        this.filterCollapseActive = true
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .table-number {
    .el-input {
      width: 300px;
      margin-right: 10px;
    }
    // 单选换行
    .el-radio + .el-radio {
      margin-left: 0;
    }
    .el-radio {
      margin-right: 10px;
      line-height: 32px;
    }
    .el-select {
      width: 300px;
    }

    /* 表格 */
    .content {
      margin-top: 10px;
    }
  }
</style>
